<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4871950" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe781;</span>
                <div class="name">UID</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">uid</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">UID</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">私有</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">皮肤</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">赞_no</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">赞</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">表情</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">播放器-弹幕顶部（开）_44</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">播放器-弹幕底部（开）_44</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">字体</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">弹幕开启状态-copy</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">弹幕设置TV</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">禁止</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">弹幕设置</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">关闭弹幕</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">弹幕</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">弹幕关闭状态-copy</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">暂停按钮</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">重试</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">文件-视频</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">对号</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">对号2</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">更换</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">弹幕数_32</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">赞</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">分 享</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x1012d;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#x1012d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x101e8;</span>
                <div class="name">分享_1</div>
                <div class="code-name">&amp;#x101e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">收益</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">实验室</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">icon-creation2</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">粉丝</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">数据中心</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">公约</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">文字-创作中心</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">bilibili</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">密保设置</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">实名认证</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">没有</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea4f;</span>
                <div class="name">我的头像</div>
                <div class="code-name">&amp;#xea4f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">黑名单</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">会员积分</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">粉丝胸章</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">实名认证</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">没有分组</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">没有信息</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">成就中心</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">记录</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">成就胸章</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">b</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">通知设置</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">没有数据</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">账号安全</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">邀请注册</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">奖励</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe878;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe878;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">硬币</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xed9b;</span>
                <div class="name">硬币</div>
                <div class="code-name">&amp;#xed9b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xed9c;</span>
                <div class="name">密保问题-copy</div>
                <div class="code-name">&amp;#xed9c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">播放器-弹幕滚动（开）_44</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">课堂2</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">热门</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">动态</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe870;</span>
                <div class="name">活动</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe866;</span>
                <div class="name">直播</div>
                <div class="code-name">&amp;#xe866;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">专栏</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">新歌热榜</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">社区中心</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">贴纸</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">投稿-默认@2x</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">投稿</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">投稿</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">投稿</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">up主</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">追热剧</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">Free-Tag 2</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">HD</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">个性装扮</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">lv2</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">lv3</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">lv1</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">lv4</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">lv7</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">lv5</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">lv6</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">推荐</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">投稿-copy</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe844;</span>
                <div class="name">bilibili</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb49;</span>
                <div class="name">电脑_o</div>
                <div class="code-name">&amp;#xeb49;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">箭头 左 小</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">历史</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">风车</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea96;</span>
                <div class="name">bilibili-line</div>
                <div class="code-name">&amp;#xea96;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">bilbili-大会员-copy</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">创作中心</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1750215049920') format('woff2'),
       url('iconfont.woff?t=1750215049920') format('woff'),
       url('iconfont.ttf?t=1750215049920') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-uid"></span>
            <div class="name">
              UID
            </div>
            <div class="code-name">.icon-uid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-uid1"></span>
            <div class="name">
              uid
            </div>
            <div class="code-name">.icon-uid1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-UID"></span>
            <div class="name">
              UID
            </div>
            <div class="code-name">.icon-UID
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-siyou"></span>
            <div class="name">
              私有
            </div>
            <div class="code-name">.icon-siyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pifu"></span>
            <div class="name">
              皮肤
            </div>
            <div class="code-name">.icon-pifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanno"></span>
            <div class="name">
              赞_no
            </div>
            <div class="code-name">.icon-zanno
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zan"></span>
            <div class="name">
              赞
            </div>
            <div class="code-name">.icon-zan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi-copy"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-xinxi-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-xinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqing-xue"></span>
            <div class="name">
              表情
            </div>
            <div class="code-name">.icon-biaoqing-xue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofangqi-danmudingbukai"></span>
            <div class="name">
              播放器-弹幕顶部（开）_44
            </div>
            <div class="code-name">.icon-bofangqi-danmudingbukai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofangqi-danmudibukai"></span>
            <div class="name">
              播放器-弹幕底部（开）_44
            </div>
            <div class="code-name">.icon-bofangqi-danmudibukai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziti"></span>
            <div class="name">
              字体
            </div>
            <div class="code-name">.icon-ziti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danmuopen"></span>
            <div class="name">
              弹幕开启状态-copy
            </div>
            <div class="code-name">.icon-danmuopen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shiliangzhinengduixiang"></span>
            <div class="name">
              弹幕设置TV
            </div>
            <div class="code-name">.icon-shiliangzhinengduixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinzhi"></span>
            <div class="name">
              禁止
            </div>
            <div class="code-name">.icon-jinzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danmushezhi"></span>
            <div class="name">
              弹幕设置
            </div>
            <div class="code-name">.icon-danmushezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbidanmu"></span>
            <div class="name">
              关闭弹幕
            </div>
            <div class="code-name">.icon-guanbidanmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danmu"></span>
            <div class="name">
              弹幕
            </div>
            <div class="code-name">.icon-danmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danmuclose"></span>
            <div class="name">
              弹幕关闭状态-copy
            </div>
            <div class="code-name">.icon-danmuclose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zantinganniu"></span>
            <div class="name">
              暂停按钮
            </div>
            <div class="code-name">.icon-zantinganniu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhongshi"></span>
            <div class="name">
              重试
            </div>
            <div class="code-name">.icon-zhongshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-zanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-video-fill"></span>
            <div class="name">
              文件-视频
            </div>
            <div class="code-name">.icon-file-video-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duihao"></span>
            <div class="name">
              对号
            </div>
            <div class="code-name">.icon-duihao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duihao2"></span>
            <div class="name">
              对号2
            </div>
            <div class="code-name">.icon-duihao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-genghuan"></span>
            <div class="name">
              更换
            </div>
            <div class="code-name">.icon-genghuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danmushu"></span>
            <div class="name">
              弹幕数_32
            </div>
            <div class="code-name">.icon-danmushu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.icon-pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon"></span>
            <div class="name">
              赞
            </div>
            <div class="code-name">.icon-icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分 享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang1"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang2"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang_1"></span>
            <div class="name">
              分享_1
            </div>
            <div class="code-name">.icon-fenxiang_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouyi"></span>
            <div class="name">
              收益
            </div>
            <div class="code-name">.icon-shouyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-laboratorylab"></span>
            <div class="name">
              实验室
            </div>
            <div class="code-name">.icon-laboratorylab
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-creation2"></span>
            <div class="name">
              icon-creation2
            </div>
            <div class="code-name">.icon-creation2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fensi"></span>
            <div class="name">
              粉丝
            </div>
            <div class="code-name">.icon-fensi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuzhongxin"></span>
            <div class="name">
              数据中心
            </div>
            <div class="code-name">.icon-shujuzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyue"></span>
            <div class="name">
              公约
            </div>
            <div class="code-name">.icon-gongyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi-chuangzuozhongxin"></span>
            <div class="name">
              文字-创作中心
            </div>
            <div class="code-name">.icon-wenzi-chuangzuozhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bilibili1"></span>
            <div class="name">
              bilibili
            </div>
            <div class="code-name">.icon-bilibili1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantoubottom"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.icon-jiantoubottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mibaoshezhi"></span>
            <div class="name">
              密保设置
            </div>
            <div class="code-name">.icon-mibaoshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shimingrenzheng2"></span>
            <div class="name">
              实名认证
            </div>
            <div class="code-name">.icon-shimingrenzheng2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meiyou"></span>
            <div class="name">
              没有
            </div>
            <div class="code-name">.icon-meiyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodetouxiang"></span>
            <div class="name">
              我的头像
            </div>
            <div class="code-name">.icon-wodetouxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-heimingdan"></span>
            <div class="name">
              黑名单
            </div>
            <div class="code-name">.icon-heimingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuanjifen"></span>
            <div class="name">
              会员积分
            </div>
            <div class="code-name">.icon-huiyuanjifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youzhi"></span>
            <div class="name">
              粉丝胸章
            </div>
            <div class="code-name">.icon-youzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shimingrenzheng"></span>
            <div class="name">
              实名认证
            </div>
            <div class="code-name">.icon-shimingrenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meiyoufenzu"></span>
            <div class="name">
              没有分组
            </div>
            <div class="code-name">.icon-meiyoufenzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meiyouxinxi"></span>
            <div class="name">
              没有信息
            </div>
            <div class="code-name">.icon-meiyouxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengjiuzhongxin"></span>
            <div class="name">
              成就中心
            </div>
            <div class="code-name">.icon-chengjiuzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jilu"></span>
            <div class="name">
              记录
            </div>
            <div class="code-name">.icon-jilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxiong"></span>
            <div class="name">
              成就胸章
            </div>
            <div class="code-name">.icon-xiaoxiong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-b"></span>
            <div class="name">
              b
            </div>
            <div class="code-name">.icon-b
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi1"></span>
            <div class="name">
              通知设置
            </div>
            <div class="code-name">.icon-shezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-meiyoushuju"></span>
            <div class="name">
              没有数据
            </div>
            <div class="code-name">.icon-meiyoushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhanghaoanquan"></span>
            <div class="name">
              账号安全
            </div>
            <div class="code-name">.icon-zhanghaoanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yaoqingzhuce"></span>
            <div class="name">
              邀请注册
            </div>
            <div class="code-name">.icon-yaoqingzhuce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiangli"></span>
            <div class="name">
              奖励
            </div>
            <div class="code-name">.icon-jiangli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.icon-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bi"></span>
            <div class="name">
              硬币
            </div>
            <div class="code-name">.icon-bi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingbi"></span>
            <div class="name">
              硬币
            </div>
            <div class="code-name">.icon-yingbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mibaowenti-copy"></span>
            <div class="name">
              密保问题-copy
            </div>
            <div class="code-name">.icon-mibaowenti-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qq"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.icon-qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibo"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.icon-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishijilu"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.icon-lishijilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofangqi-danmugundongkai"></span>
            <div class="name">
              播放器-弹幕滚动（开）_44
            </div>
            <div class="code-name">.icon-bofangqi-danmugundongkai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ketang"></span>
            <div class="name">
              课堂2
            </div>
            <div class="code-name">.icon-ketang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remen"></span>
            <div class="name">
              热门
            </div>
            <div class="code-name">.icon-remen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dongtai"></span>
            <div class="name">
              动态
            </div>
            <div class="code-name">.icon-dongtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huodong"></span>
            <div class="name">
              活动
            </div>
            <div class="code-name">.icon-huodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibo"></span>
            <div class="name">
              直播
            </div>
            <div class="code-name">.icon-zhibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanlan"></span>
            <div class="name">
              专栏
            </div>
            <div class="code-name">.icon-zhuanlan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingerebang"></span>
            <div class="name">
              新歌热榜
            </div>
            <div class="code-name">.icon-xingerebang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shequzhongxin"></span>
            <div class="name">
              社区中心
            </div>
            <div class="code-name">.icon-shequzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiezhi"></span>
            <div class="name">
              贴纸
            </div>
            <div class="code-name">.icon-tiezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tougao-morenx"></span>
            <div class="name">
              投稿-默认@2x
            </div>
            <div class="code-name">.icon-tougao-morenx
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tougao1"></span>
            <div class="name">
              投稿
            </div>
            <div class="code-name">.icon-tougao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-zu313"></span>
            <div class="name">
              投稿
            </div>
            <div class="code-name">.icon-a-zu313
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tougao2"></span>
            <div class="name">
              投稿
            </div>
            <div class="code-name">.icon-tougao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upzhu"></span>
            <div class="name">
              up主
            </div>
            <div class="code-name">.icon-upzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuireju"></span>
            <div class="name">
              追热剧
            </div>
            <div class="code-name">.icon-zhuireju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Free-Tag"></span>
            <div class="name">
              Free-Tag 2
            </div>
            <div class="code-name">.icon-Free-Tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-HD"></span>
            <div class="name">
              HD
            </div>
            <div class="code-name">.icon-HD
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gexingzhuangban"></span>
            <div class="name">
              个性装扮
            </div>
            <div class="code-name">.icon-gexingzhuangban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenzhongxin"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-gerenzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-lv2"></span>
            <div class="name">
              lv2
            </div>
            <div class="code-name">.icon-icon-lv2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-lv3"></span>
            <div class="name">
              lv3
            </div>
            <div class="code-name">.icon-icon-lv3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-lv1"></span>
            <div class="name">
              lv1
            </div>
            <div class="code-name">.icon-icon-lv1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-lv4"></span>
            <div class="name">
              lv4
            </div>
            <div class="code-name">.icon-icon-lv4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-lv7"></span>
            <div class="name">
              lv7
            </div>
            <div class="code-name">.icon-icon-lv7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-lv5"></span>
            <div class="name">
              lv5
            </div>
            <div class="code-name">.icon-icon-lv5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-lv6"></span>
            <div class="name">
              lv6
            </div>
            <div class="code-name">.icon-icon-lv6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuichu"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuijian"></span>
            <div class="name">
              推荐
            </div>
            <div class="code-name">.icon-tuijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tougao"></span>
            <div class="name">
              投稿-copy
            </div>
            <div class="code-name">.icon-tougao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bilibili"></span>
            <div class="name">
              bilibili
            </div>
            <div class="code-name">.icon-bilibili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diannao_o"></span>
            <div class="name">
              电脑_o
            </div>
            <div class="code-name">.icon-diannao_o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou2"></span>
            <div class="name">
              箭头 左 小
            </div>
            <div class="code-name">.icon-jiantou2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mobile-phone"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.icon-mobile-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishi"></span>
            <div class="name">
              历史
            </div>
            <div class="code-name">.icon-lishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengche"></span>
            <div class="name">
              风车
            </div>
            <div class="code-name">.icon-fengche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bilibili-line"></span>
            <div class="name">
              bilibili-line
            </div>
            <div class="code-name">.icon-bilibili-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-big-vip"></span>
            <div class="name">
              bilbili-大会员-copy
            </div>
            <div class="code-name">.icon-big-vip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuangzuozhongxin"></span>
            <div class="name">
              创作中心
            </div>
            <div class="code-name">.icon-chuangzuozhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-uid"></use>
                </svg>
                <div class="name">UID</div>
                <div class="code-name">#icon-uid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-uid1"></use>
                </svg>
                <div class="name">uid</div>
                <div class="code-name">#icon-uid1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-UID"></use>
                </svg>
                <div class="name">UID</div>
                <div class="code-name">#icon-UID</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-siyou"></use>
                </svg>
                <div class="name">私有</div>
                <div class="code-name">#icon-siyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pifu"></use>
                </svg>
                <div class="name">皮肤</div>
                <div class="code-name">#icon-pifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanno"></use>
                </svg>
                <div class="name">赞_no</div>
                <div class="code-name">#icon-zanno</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zan"></use>
                </svg>
                <div class="name">赞</div>
                <div class="code-name">#icon-zan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi-copy"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-xinxi-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-xinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqing-xue"></use>
                </svg>
                <div class="name">表情</div>
                <div class="code-name">#icon-biaoqing-xue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangqi-danmudingbukai"></use>
                </svg>
                <div class="name">播放器-弹幕顶部（开）_44</div>
                <div class="code-name">#icon-bofangqi-danmudingbukai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangqi-danmudibukai"></use>
                </svg>
                <div class="name">播放器-弹幕底部（开）_44</div>
                <div class="code-name">#icon-bofangqi-danmudibukai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziti"></use>
                </svg>
                <div class="name">字体</div>
                <div class="code-name">#icon-ziti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danmuopen"></use>
                </svg>
                <div class="name">弹幕开启状态-copy</div>
                <div class="code-name">#icon-danmuopen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shiliangzhinengduixiang"></use>
                </svg>
                <div class="name">弹幕设置TV</div>
                <div class="code-name">#icon-shiliangzhinengduixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinzhi"></use>
                </svg>
                <div class="name">禁止</div>
                <div class="code-name">#icon-jinzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danmushezhi"></use>
                </svg>
                <div class="name">弹幕设置</div>
                <div class="code-name">#icon-danmushezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbidanmu"></use>
                </svg>
                <div class="name">关闭弹幕</div>
                <div class="code-name">#icon-guanbidanmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danmu"></use>
                </svg>
                <div class="name">弹幕</div>
                <div class="code-name">#icon-danmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danmuclose"></use>
                </svg>
                <div class="name">弹幕关闭状态-copy</div>
                <div class="code-name">#icon-danmuclose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zantinganniu"></use>
                </svg>
                <div class="name">暂停按钮</div>
                <div class="code-name">#icon-zantinganniu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongshi"></use>
                </svg>
                <div class="name">重试</div>
                <div class="code-name">#icon-zhongshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-zanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-video-fill"></use>
                </svg>
                <div class="name">文件-视频</div>
                <div class="code-name">#icon-file-video-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duihao"></use>
                </svg>
                <div class="name">对号</div>
                <div class="code-name">#icon-duihao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duihao2"></use>
                </svg>
                <div class="name">对号2</div>
                <div class="code-name">#icon-duihao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-genghuan"></use>
                </svg>
                <div class="name">更换</div>
                <div class="code-name">#icon-genghuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danmushu"></use>
                </svg>
                <div class="name">弹幕数_32</div>
                <div class="code-name">#icon-danmushu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#icon-pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon"></use>
                </svg>
                <div class="name">赞</div>
                <div class="code-name">#icon-icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分 享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang2"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang_1"></use>
                </svg>
                <div class="name">分享_1</div>
                <div class="code-name">#icon-fenxiang_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouyi"></use>
                </svg>
                <div class="name">收益</div>
                <div class="code-name">#icon-shouyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-laboratorylab"></use>
                </svg>
                <div class="name">实验室</div>
                <div class="code-name">#icon-laboratorylab</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-creation2"></use>
                </svg>
                <div class="name">icon-creation2</div>
                <div class="code-name">#icon-creation2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fensi"></use>
                </svg>
                <div class="name">粉丝</div>
                <div class="code-name">#icon-fensi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuzhongxin"></use>
                </svg>
                <div class="name">数据中心</div>
                <div class="code-name">#icon-shujuzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongyue"></use>
                </svg>
                <div class="name">公约</div>
                <div class="code-name">#icon-gongyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi-chuangzuozhongxin"></use>
                </svg>
                <div class="name">文字-创作中心</div>
                <div class="code-name">#icon-wenzi-chuangzuozhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bilibili1"></use>
                </svg>
                <div class="name">bilibili</div>
                <div class="code-name">#icon-bilibili1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantoubottom"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#icon-jiantoubottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mibaoshezhi"></use>
                </svg>
                <div class="name">密保设置</div>
                <div class="code-name">#icon-mibaoshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shimingrenzheng2"></use>
                </svg>
                <div class="name">实名认证</div>
                <div class="code-name">#icon-shimingrenzheng2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meiyou"></use>
                </svg>
                <div class="name">没有</div>
                <div class="code-name">#icon-meiyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodetouxiang"></use>
                </svg>
                <div class="name">我的头像</div>
                <div class="code-name">#icon-wodetouxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heimingdan"></use>
                </svg>
                <div class="name">黑名单</div>
                <div class="code-name">#icon-heimingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuanjifen"></use>
                </svg>
                <div class="name">会员积分</div>
                <div class="code-name">#icon-huiyuanjifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youzhi"></use>
                </svg>
                <div class="name">粉丝胸章</div>
                <div class="code-name">#icon-youzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shimingrenzheng"></use>
                </svg>
                <div class="name">实名认证</div>
                <div class="code-name">#icon-shimingrenzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meiyoufenzu"></use>
                </svg>
                <div class="name">没有分组</div>
                <div class="code-name">#icon-meiyoufenzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meiyouxinxi"></use>
                </svg>
                <div class="name">没有信息</div>
                <div class="code-name">#icon-meiyouxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengjiuzhongxin"></use>
                </svg>
                <div class="name">成就中心</div>
                <div class="code-name">#icon-chengjiuzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jilu"></use>
                </svg>
                <div class="name">记录</div>
                <div class="code-name">#icon-jilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxiong"></use>
                </svg>
                <div class="name">成就胸章</div>
                <div class="code-name">#icon-xiaoxiong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-b"></use>
                </svg>
                <div class="name">b</div>
                <div class="code-name">#icon-b</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi1"></use>
                </svg>
                <div class="name">通知设置</div>
                <div class="code-name">#icon-shezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-meiyoushuju"></use>
                </svg>
                <div class="name">没有数据</div>
                <div class="code-name">#icon-meiyoushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhanghaoanquan"></use>
                </svg>
                <div class="name">账号安全</div>
                <div class="code-name">#icon-zhanghaoanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yaoqingzhuce"></use>
                </svg>
                <div class="name">邀请注册</div>
                <div class="code-name">#icon-yaoqingzhuce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiangli"></use>
                </svg>
                <div class="name">奖励</div>
                <div class="code-name">#icon-jiangli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#icon-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bi"></use>
                </svg>
                <div class="name">硬币</div>
                <div class="code-name">#icon-bi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingbi"></use>
                </svg>
                <div class="name">硬币</div>
                <div class="code-name">#icon-yingbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mibaowenti-copy"></use>
                </svg>
                <div class="name">密保问题-copy</div>
                <div class="code-name">#icon-mibaowenti-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qq"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#icon-qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#icon-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishijilu"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#icon-lishijilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangqi-danmugundongkai"></use>
                </svg>
                <div class="name">播放器-弹幕滚动（开）_44</div>
                <div class="code-name">#icon-bofangqi-danmugundongkai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ketang"></use>
                </svg>
                <div class="name">课堂2</div>
                <div class="code-name">#icon-ketang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remen"></use>
                </svg>
                <div class="name">热门</div>
                <div class="code-name">#icon-remen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dongtai"></use>
                </svg>
                <div class="name">动态</div>
                <div class="code-name">#icon-dongtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huodong"></use>
                </svg>
                <div class="name">活动</div>
                <div class="code-name">#icon-huodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibo"></use>
                </svg>
                <div class="name">直播</div>
                <div class="code-name">#icon-zhibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanlan"></use>
                </svg>
                <div class="name">专栏</div>
                <div class="code-name">#icon-zhuanlan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingerebang"></use>
                </svg>
                <div class="name">新歌热榜</div>
                <div class="code-name">#icon-xingerebang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shequzhongxin"></use>
                </svg>
                <div class="name">社区中心</div>
                <div class="code-name">#icon-shequzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiezhi"></use>
                </svg>
                <div class="name">贴纸</div>
                <div class="code-name">#icon-tiezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tougao-morenx"></use>
                </svg>
                <div class="name">投稿-默认@2x</div>
                <div class="code-name">#icon-tougao-morenx</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tougao1"></use>
                </svg>
                <div class="name">投稿</div>
                <div class="code-name">#icon-tougao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-zu313"></use>
                </svg>
                <div class="name">投稿</div>
                <div class="code-name">#icon-a-zu313</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tougao2"></use>
                </svg>
                <div class="name">投稿</div>
                <div class="code-name">#icon-tougao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upzhu"></use>
                </svg>
                <div class="name">up主</div>
                <div class="code-name">#icon-upzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuireju"></use>
                </svg>
                <div class="name">追热剧</div>
                <div class="code-name">#icon-zhuireju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Free-Tag"></use>
                </svg>
                <div class="name">Free-Tag 2</div>
                <div class="code-name">#icon-Free-Tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-HD"></use>
                </svg>
                <div class="name">HD</div>
                <div class="code-name">#icon-HD</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gexingzhuangban"></use>
                </svg>
                <div class="name">个性装扮</div>
                <div class="code-name">#icon-gexingzhuangban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenzhongxin"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-gerenzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-lv2"></use>
                </svg>
                <div class="name">lv2</div>
                <div class="code-name">#icon-icon-lv2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-lv3"></use>
                </svg>
                <div class="name">lv3</div>
                <div class="code-name">#icon-icon-lv3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-lv1"></use>
                </svg>
                <div class="name">lv1</div>
                <div class="code-name">#icon-icon-lv1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-lv4"></use>
                </svg>
                <div class="name">lv4</div>
                <div class="code-name">#icon-icon-lv4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-lv7"></use>
                </svg>
                <div class="name">lv7</div>
                <div class="code-name">#icon-icon-lv7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-lv5"></use>
                </svg>
                <div class="name">lv5</div>
                <div class="code-name">#icon-icon-lv5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-lv6"></use>
                </svg>
                <div class="name">lv6</div>
                <div class="code-name">#icon-icon-lv6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichu"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuijian"></use>
                </svg>
                <div class="name">推荐</div>
                <div class="code-name">#icon-tuijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tougao"></use>
                </svg>
                <div class="name">投稿-copy</div>
                <div class="code-name">#icon-tougao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bilibili"></use>
                </svg>
                <div class="name">bilibili</div>
                <div class="code-name">#icon-bilibili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diannao_o"></use>
                </svg>
                <div class="name">电脑_o</div>
                <div class="code-name">#icon-diannao_o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou2"></use>
                </svg>
                <div class="name">箭头 左 小</div>
                <div class="code-name">#icon-jiantou2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobile-phone"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#icon-mobile-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishi"></use>
                </svg>
                <div class="name">历史</div>
                <div class="code-name">#icon-lishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengche"></use>
                </svg>
                <div class="name">风车</div>
                <div class="code-name">#icon-fengche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bilibili-line"></use>
                </svg>
                <div class="name">bilibili-line</div>
                <div class="code-name">#icon-bilibili-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-big-vip"></use>
                </svg>
                <div class="name">bilbili-大会员-copy</div>
                <div class="code-name">#icon-big-vip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuangzuozhongxin"></use>
                </svg>
                <div class="name">创作中心</div>
                <div class="code-name">#icon-chuangzuozhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
